body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    transform: rotate(90deg);
}
body>div{
    height: 100vw;width:100vh;overflow: hidden;
}
body>div>div{
    height: 100vw;width:100vh;overflow: hidden;
}
.hide {
    display: none !important;
}
.flash {
    animation: flash 0.1s infinite;
}
.flex-center{
    display: flex;justify-content: center;align-items: center;
}
#page-1>div{
    background-color: black;flex-direction: column;color: #fff;font-size: 7vh;
}
#page-1>div>div{
    flex:1;position: relative;
}
#page-1>div>div:nth-child(1){
    animation: move001 1s;animation-fill-mode: both;animation-delay:0s;
}
#page-1>div>div:nth-child(2){
    animation: move002 1s;animation-fill-mode: both;animation-delay:1s;
}
#page-1>div>div:nth-child(3){
    animation: move003 2s;animation-fill-mode: both;animation-delay:2s;
}
#page-2>div{
    font-size: 20vh;
}
#page-2>div>div{
    height: 100vw;flex:1;position: relative;
}
#page-2>div>div:nth-child(1){
    background-color: black;color:white;animation: move004 0.5s;animation-fill-mode: both;animation-delay:0s;
}
#page-2>div>div:nth-child(2){
    background-color: white;color:black;animation: move005 0.5s;animation-fill-mode: both;animation-delay:0.5s;
}
#page-2>div>div:nth-child(3){
    background-color: black;color:white;animation: move004 0.5s;animation-fill-mode: both;animation-delay:1s;
}
#page-2>div>div:nth-child(4){
    background-color: white;color:black;animation: move005 0.5s;animation-fill-mode: both;animation-delay:1.5s;
}
#page-3>div{
    font-size: 20vh;
}
#page-3>div>div{
    position: absolute;top:0;height: 100vw;width:50vh;
}
#page-3>div>div:nth-child(1){
    left:0;background-color: black;color:white;animation: move006 0.4s;animation-fill-mode: both;animation-delay:0s;
}
#page-3>div>div:nth-child(2){
    left:50vh;background-color: white;color:black;animation: move006 0.4s;animation-fill-mode: both;animation-delay:0s;
}
#page-3>div>div:nth-child(3){
    left:0;background-color: black;color:white;animation: move006 0.4s;animation-fill-mode: both;animation-delay:0.4s;
}
#page-3>div>div:nth-child(4){
    left:50vh;background-color: white;color:black;animation: move006 0.4s;animation-fill-mode: both;animation-delay:0.4s;
}
#page-3>div>div:nth-child(5){
    left:0;background-color: black;color:white;animation: move006 0.4s;animation-fill-mode: both;animation-delay:0.8s;
}
#page-3>div>div:nth-child(6){
    left:50vh;background-color: white;color:black;animation: move006 0.4s;animation-fill-mode: both;animation-delay:0.8s;
}
#page-4>div{
    font-size: 20vh;position: relative;
}
#page-4>div>div{
    width:100vh;height:100vw;position: absolute;top:0;left:0;
}
#page-4>div>div:nth-child(1){
    animation: move007 0.25s;animation-fill-mode: both;animation-delay:0s
}
#page-4>div>div:nth-child(2){
    animation: move007 0.25s;animation-fill-mode: both;animation-delay:0.25s;
}
#page-4>div>div:nth-child(3){
    animation: move007 0.25s;animation-fill-mode: both;animation-delay:0.5s;
}
#page-4>div>div:nth-child(4){
    animation: move008 0.25s;animation-fill-mode: both;animation-delay:0.75s;background-color:black;color:#fff;
}
#page-5>div{
    position: relative;background-color: black;
}
#page-5>div>div{
    position: absolute;height:100vw;
}
#page-5>div>div:nth-child(1){
    top:0;left:0;color:white;width:50vh;animation: move009 0.4s;animation-fill-mode: both;animation-delay:0s;
}
#page-5>div>div:nth-child(2){
    top:0;right:0;color:white;width:50vh;animation: move009 0.4s;animation-fill-mode: both;animation-delay:0.4s;
}
#page-5>div>div:nth-child(3){
    top:0;left:30vh;color:white;width:50vh;animation: move009 0.4s;animation-fill-mode: both;animation-delay:0.8s;
}
#page-5>div>div:nth-child(4){
    top:-20vh;left:50vh;color:white;width:50vh;animation: move009 0.4s;animation-fill-mode: both;animation-delay:1.2s;
}
#page-5>div>div:nth-child(5){
    top:0;left:10vh;color:white;width:80vh;animation: move009 0.4s;animation-fill-mode: both;animation-delay:1.6s;
}
#page-5>div>div:nth-child(6){
    top:0;left:0;color:white;width:100vh;animation: move010 0.1s;animation-fill-mode: both;animation-delay:2s;font-weight: bold;
}
#page-6>div{
    position: relative;background-color: black;
}
#page-6>div>div{
    position: absolute;top:0;color:white;height:100vw;
}
#page-6>div>div:nth-child(1){
    left:0;width:100vh;animation: move011 0.8s;animation-fill-mode: both;animation-delay:0s;
}
#page-6>div>div:nth-child(2){
    left:0;width:50vh;animation: move012 1.2s;animation-fill-mode: both;animation-delay:0.8s;
}
#page-6>div>div:nth-child(3){
    left:50vh;width:20vh;animation: move012 1.2s;animation-fill-mode: both;animation-delay:0.8s;
}
#page-6>div>div:nth-child(4){
    left:0;width:100vh;animation: move009 0.5s;animation-fill-mode: both;animation-delay:2s;
}
#page-6>div>div:nth-child(5){
    left:0;width:100vh;animation: move009 0.5s;animation-fill-mode: both;animation-delay:2.5s;
}
#page-6>div>div:nth-child(6){
    left:0;width:100vh;animation: move012 1s;animation-fill-mode: both;animation-delay:3s
}
#page-6>div>div:nth-child(7){
    left:0;width:50vh;animation: move009 0.5s;animation-fill-mode: both;animation-delay:4s
}
#page-6>div>div:nth-child(8){
    right:0;width:50vh;animation: move009 0.5s;animation-fill-mode: both;animation-delay:4.5s;
}
#page-6>div>div:nth-child(9){
    left:0;width:100vh;animation: move013 1s;animation-fill-mode: both;animation-delay:5s;
}
#page-6>div>div:nth-child(10){
    left:0;width:50vh;animation: move012 1.2s;animation-fill-mode: both;animation-delay:6s;
}
#page-6>div>div:nth-child(11){
    left:50vh;width:20vh;animation: move012 1.2s;animation-fill-mode: both;animation-delay:6s;
}
#page-7>div{
    position: relative;background-color: black;
}
#page-7>div>div{
    position: absolute;
}
#page-7>div>div:nth-child(1){
    top:0;left:0;color:white;width:100vh;height:100vw;animation: move014 1s;animation-fill-mode: both;animation-delay: 0s;
}
#page-7>div>div:nth-child(2){
    top:calc( 50vw - 10vh);left:40vh;background-color:white;width:20vh;height:20vh;animation: move015 3s;animation-fill-mode: both;animation-delay: 1s;border-radius: 50%;
}
#page-7>div>div:nth-child(3){
    top:calc( 50vw - 10vh);left:40vh;background-color:white;width:20vh;height:20vh;animation: move016 2s;animation-fill-mode: both;animation-delay: 4s;border-radius: 50%;
}
#page-7>div>div:nth-child(4){
    top:calc( 50vw - 11vh - 5px);left:calc(39vh - 5px);background-color:transparent;width:22vh;height:22vh;animation: move016 2s;animation-fill-mode: both;animation-delay: 4s;border-radius: 50%;border: 5px solid #fff;
}
#page-7>div>div:nth-child(5){
    top:calc( 50vw - 13vh - 5px);left:calc(37vh - 5px);background-color:transparent;width:26vh;height:26vh;animation: move016 2s;animation-fill-mode: both;animation-delay: 4s;border-radius: 50%;border: 5px solid #fff;
}
#page-7>div>div:nth-child(6){
    top:calc( 50vw - 17vh - 5px);left:calc(33vh - 5px);background-color:transparent;width:34vh;height:34vh;animation: move016 2s;animation-fill-mode: both;animation-delay: 4s;border-radius: 50%;border: 5px solid #fff;
}
#page-7>div>div:nth-child(7){
    top:0;left:0;color:black;width:100vh;height:100vw;left:0;animation: move014 6s;animation-fill-mode: both;animation-delay: 1s;
}
#page-7>div>div:nth-child(8){
    top:0;left:0;background-color:white;width:100vh;height:100vw;animation: move018 2s;animation-fill-mode: both;animation-delay: 6s;
}
#page-7>div>div:nth-child(9){
    top:0;left:0;color:black;width:100vh;height:100vw;left:0;animation: move017 1s;animation-fill-mode: both;animation-delay: 6s;
}
.box1 {
    perspective: 100vh;
    position: relative;
}

.content1 {
    width: 100vh;
    height: 100vw;
    transform-style: preserve-3d;
    animation: move019 4s;
}

.content1 div,
.content1 img {
    width: 100vh;
    height: 100vw;
    position: absolute;
    text-align: center;
    line-height: 100vw;
    backface-visibility: hidden;
    background-color: #fff;
    font-size: 5vh;
}

.front1 {
    transform: translateZ(0);
    color: black;
}

.back1 {
    transform: translateZ(-100vh) rotateY(180deg);
    background-image: url('../../static/image/lanqiu.jpg');
    background-size: 100% 100%;
    color: white;
}

.left1 {
    left: -50vh;
    transform: translateZ(-50vh) rotateY(-90deg);
    background-image: url('../../static/image/paobu.jpg');
    background-size: 100% 100%;
    color: white;
}

.right1 {
    left: 50vh;
    transform: translateZ(-50vh) rotateY(90deg);
    background-image: url('../../static/image/youyong.jpg');
    background-size: 100% 100%;
    color: white;
}
#page-9>div{
    position: relative;background-color: black;
}
#page-9>div>div{
    position: absolute;top:0;left:0;color:white;width:100vh;height:100vw;font-size: 5vh;
}
.box2 {
    perspective: 100vh;
    position: relative;
}

.content2 {
    width: 100vh;
    height: 100vw;
    transform-style: preserve-3d;
    animation: move020 4s;
}

.content2 div {
    width: 100vh;
    height: 100vw;
    position: absolute;
    text-align: center;
    line-height: 100vw;
    backface-visibility: hidden;
    background-color: #fff;
    font-size: 5vh;
}

.front2 {
    transform: translateZ(0);
    color: black;
}

.back2 {
    transform: translateZ(100vh) rotateY(180deg);
    background-image: url('../../static/image/xuexi.jpg');
    background-size: 100% 100%;
    color: white;
}

.left2 {
    left: -50vh;
    transform: translateZ(50vh) rotateY(90deg);
    background-image: url('../../static/image/xuexi.jpg');
    background-size: 100% 100%;
    color: white;
}

.right2 {
    left: 50vh;
    transform: translateZ(50vh) rotateY(-90deg);
    background-image: url('../../static/image/xuexi.jpg');
    background-size: 100% 100%;
    color: white;
}

#page-11>div{
    position: relative;background-color: black;
}
#page-11>div>div{
    position: absolute;top:0;left:0;color:white;width:100vh;height:100vw;font-size: 5vh;
}

#page-12>div{
    background-color: black;flex-direction: column;color: #fff;font-size: 5vh;
}
#page-12>div>div{
    flex:1;position: relative;
}
#page-12>div>div:nth-child(1){
    animation: move021 0.5s;animation-delay:0s;animation-fill-mode: both;
}
#page-12>div>div:nth-child(2){
    animation: move021 0.5s;animation-delay:0.5s;animation-fill-mode: both;
}
#page-12>div>div:nth-child(3){
    animation: move021 0.5s;animation-delay:1s;animation-fill-mode: both;
}

#page-13>div{
    background-color: black;flex-direction: column;color: #fff;
}
#page-13>div>div{
    position: relative;animation: move022 1s;animation-fill-mode: both; font-size: 10vh;
}

@keyframes flash {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.1;
    }

    to {
        opacity: 1.0;
    }
}
@keyframes move001 {
    from {
        top: 90vw;
    }

    to {
        top: 0;
    }
}

@keyframes move002 {
    from {
        top: 70vw;
    }

    to {
        top: 0;
    }
}

@keyframes move003 {
    from {
        transform: rotate(0deg);
        top: 50vw;
    }

    to {
        transform: rotate(720deg);
        top: 0;
    }
}
@keyframes move004 {
    from {
        top: 100vw;
    }

    to {
        top: 0;
    }
}

@keyframes move005 {
    from {
        top: -100vw;
    }

    to {
        top: 0;
    }
}

@keyframes move006 {
    from {
        font-size: 20vh;
        opacity: 0;
    }

    50% {
        font-size: 100vh;
        opacity: 1;
    }

    to {
        font-size: 20vh;
        opacity: 1;
    }

}
@keyframes move007 {
    from {
        opacity: 0;
        font-size: 100vh;
    }

    50% {
        opacity: 1;
        font-size: 100vh;
    }

    to {
        opacity: 0;
        font-size: 20vh;
    }
}


@keyframes move008 {
    from {
        opacity: 0;
        font-size: 100vh;
    }

    50% {
        opacity: 1;
        font-size: 100vh;
    }

    to {
        opacity: 1;
        font-size: 20vh;
    }
}
@keyframes move009 {
    from {
        font-size: 10vh;
        opacity: 0;
    }

    50% {
        font-size: 10vh;
        opacity: 1;
    }

    to {
        font-size: 10vh;
        opacity: 0;
    }

}

@keyframes move010 {
    from {
        font-size: 20vh;
        opacity: 0;
    }

    50% {
        font-size: 20vh;
        opacity: 1;
    }

    to {
        font-size: 10vh;
        opacity: 1;
    }

}
@keyframes move011 {
    from {
        font-size: 10vh;
        opacity: 0;
    }

    50% {
        font-size: 10vh;
        opacity: 1;
    }

    to {
        font-size: 10vh;
        opacity: 0;
    }

}

@keyframes move012 {
    0% {
        opacity: 0;
        font-size: 5vw;
        top: 90vw;
    }

    15% {
        opacity: 1;
        font-size: 5vh;
        top: 0;
    }

    90% {
        opacity: 1;
        font-size: 5vh;
        top: 0;
    }

    100% {
        opacity: 0;
        font-size: 5vw;
        top: 0;
    }

}

@keyframes move013 {
    from {
        font-size: 10vh;
        opacity: 0;
    }

    1% {
        font-size: 10vh;
        opacity: 1;
    }

    99% {
        font-size: 10vh;
        opacity: 1;
    }

    to {
        font-size: 10vh;
        opacity: 0;
    }

}
@keyframes move014 {
    from {
        font-size: 5vh;
        opacity: 0;
    }

    1% {
        font-size: 5vh;
        opacity: 1;
    }

    99% {
        font-size: 5vh;
        opacity: 1;
    }

    to {
        font-size: 5vh;
        opacity: 0;
    }
}

@keyframes move015 {
    from {
        font-size: 5vh;
        opacity: 0;
        transform: rotateY(-720deg);
    }

    1% {
        font-size: 5vh;
        opacity: 1;
    }

    99% {
        font-size: 5vh;
        opacity: 1;
    }

    to {
        font-size: 5vh;
        opacity: 0;
    }
}

@keyframes move016 {
    from {
        font-size: 5vh;
        opacity: 0;
        transform: scale(1);
    }

    1% {
        font-size: 5vh;
        opacity: 1;
        transform: scale(1);
    }

    99% {
        font-size: 5vh;
        opacity: 1;
        transform: scale(20);
    }

    to {
        font-size: 5vh;
        transform: scale(20);
        opacity: 0;
    }
}

@keyframes move017 {
    from {
        font-size: 5vh;
        opacity: 0;
        transform: rotateY(-360deg);
    }

    1% {
        font-size: 5vh;
        opacity: 1;
        transform: rotateY(-360deg);
    }

    99% {
        font-size: 5vh;
        opacity: 1;
    }

    to {
        font-size: 5vh;
        opacity: 0;
    }
}

@keyframes move018 {
    from {
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    99% {

        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes move019 {
    0% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(0);
    }

    12.5% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(0);
    }

    25% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(-90deg);
    }

    37.5% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(-90deg);
    }

    50% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(-90deg);
    }

    62.5% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(-180deg);
    }

    75% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(-180deg);
    }

    87.5% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(-270deg);
    }

    100% {
        transform-origin: 50% 50% -50vh;
        transform: rotateY(-270deg);
    }
}
@keyframes move020 {
    0% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(0);
    }

    12.5% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(0);
    }

    25% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(90deg);
    }

    37.5% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(90deg);
    }

    50% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(90deg);
    }

    62.5% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(180deg);
    }

    75% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(180deg);
    }

    87.5% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(270deg);
    }

    100% {
        transform-origin: 50% 50% 50vh;
        transform: rotateY(270deg);
    }
}
@keyframes move021 {
    from {
        top: -200vw;
    }

    to {
        top: 0;
    }
}
@keyframes move022 {
    0% {
        transform: rotate(0deg);
    }

    33% {
        transform: rotate(720deg);
    }

    66% {
        transform: rotate(720deg) scale(3);
    }

    100% {
        transform: rotate(720deg) scale(1);
    }
}